<template>
  <div class="sun">
    <div
      class="has-select"
      v-if="path"
      v-html="path"
    >
    </div>
    <div
      id="sun_left"
      ref="sun_left"
    ></div>
  </div>
</template>
<script>
import { queryLabTree } from "@/api/screen/industryGraph";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data () {
    return {
      path: ''
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created () { },
  mounted () { },
  destroy () { },
  /* 5. Vue方法 */
  methods: {
    async initInfo (type) {
      const _this = this
      // 获取数据
      const info = await this.getSun(type)
      console.log(info, 'info');
      // 数据结构处理
      let myChart = this.$echarts.init(this.$refs.sun_left);
      // 上游、中游、下游颜色
      const colors = ['#6251d8', '#2d6af6', '#3a9cab'];
      const colorsFont = ['#a69aff', '#7aa2ff', '#75e0f0'];
      const bgColor = '#3E9DDE';
      const data = info
      for (let j = 0; j < data.length; ++j) {
        const level1 = data[j].children;
        // 设置中心点的颜色
        data[j].itemStyle = {
          color: '#1d33b6'
        }
        data[j].label = {
          color: '#fff',
          fontWeight: 'bold'
        };
        for (let i = 0; i < level1.length; ++i) {
          // 设置上中下游区域的颜色
          switch (level1[i].name) {
            case '上游':
              level1[i].itemStyle = {
                color: colors[0]
              }
              level1[i].label = {
                fontSize: 15,
                color: '#fff',
              };
              break;
            case '中游':
              level1[i].itemStyle = {
                color: colors[1]
              }
              level1[i].label = {
                fontSize: 15,
                color: '#fff',
              };
              break;
            case '下游':
              level1[i].itemStyle = {
                color: colors[2]
              }
              level1[i].label = {
                fontSize: 15,
                color: '#fff',
              };
            default:
              break;
          }
          // console.log(level1[i], 'level1');
          let block = level1[i].children;
          let bookScore = [];
          let bookScoreId;
          for (let star = 0; star < block.length; ++star) {
            // 设置上中下游的下级字体的颜色
            let style = (function (item) {
              const pname = item.pname
              let color = ''
              switch (pname) {
                case '上游':
                  color = colorsFont[0]
                  break;
                case '中游':
                  color = colorsFont[1]
                  break;
                case '下游':
                  color = colorsFont[2]
                  break;
                default:
                  break;
              }
              return { color: color };
            })(block[star]);
            block[star].label = {
              color: style.color,
              downplay: {
                opacity: 0.5
              }
            };

            if (block[star].children) {
              block[star].children.forEach(function (book) {

                book.value = 1;
                book.itemStyle = {
                  color: style.color
                };
                book.label = {
                  color: style.color
                };
              });
            }
          }
        }
      }

      const option = {
        // backgroundColor: bgColor,
        color: colors,
        series: [{
          type: 'sunburst',
          nodeClick: false, //是否允许旭日图点击 默认可以点击
          center: ['50%', '36%'],
          emphasis: {
          },
          data: data,
          sort: function (a, b) {
            if (a.depth === 1) {
              return b.getValue() - a.getValue();
            }
            else {
              return a.dataIndex - b.dataIndex;
            }
          },
          label: {
            rotate: 'radial',
            color: bgColor
          },
          itemStyle: {
            borderColor: bgColor,
            borderWidth: 2,
          },
          levels: [{}, {
            r0: 0,
            r: 40,
            label: {
              rotate: 0
            }
          }, {
            r0: 40,
            r: 105
          }, {
            r0: 115,
            r: 140,
            itemStyle: {
              shadowBlur: 2,
              shadowColor: colors[2],
              color: 'transparent'
            },
            label: {
              rotate: 'tangential',
              fontSize: 10,
              color: colors[0]
            }
          }, {
            r0: 140,
            r: 155,
            itemStyle: {
              shadowBlur: 2,
              shadowColor: '#fff'
            },
            label: {
              position: 'outside',
              textShadowBlur: 1,
              textShadowColor: '#333'
            },
            downplay: {
              label: {
                opacity: 0.5
              }
            }
          }]
        }]
      };
      myChart.setOption(option);
      // 监听事件
      myChart.on('click', function (params) {
        // if (params.dataIndex !== 0) {
        //   // 不处理点击根节点
        //   const data = myChart.getOption().series[0].data
        //   // console.log(data, 'data');
        //   // 取消所有的高亮
        //   data.forEach((pre, index) => {
        //     myChart.dispatchAction({
        //       type: 'downplay',
        //       dataIndex: index
        //     })
        //   })
        //   // 高亮点击的区域
        //   myChart.dispatchAction({
        //     type: 'highlight',
        //     dataIndex: params.dataIndex
        //   })
        // }
        _this.goSearch(params)
      })
    },
    // 旭日图点击
    goSearch (item) {
      console.log(item, 'item');
      const selectOne = `<span style="color: yellow">${item.data.path.split('->').pop()}</span>`
      const list = item.data.path.split('->')
      list.pop()
      list.push(selectOne)
      this.path = list.join('->')
      console.log(list, 'list');
      this.$emit('sunSearch', list.length, item.data.name)
    },
    // 获取对应产业的旭日图谱
    async getSun (type) {
      try {
        const params = {
          lx: type
        }
        const res = await queryLabTree(params)
        // console.log(res, 'res');
        if (res.code === 200) {
          return res.data
        } else {
          this.$message.error('获取旭日图数据失败')
        }
      } catch (error) {
        console.error(error);
      }
    },
  }
};
</script>
<style scoped lang="scss">
.sun {
  position: relative;

  .has-select {
    position: absolute;
    top: 0;
    text-align: center;
    left: 0;
    right: 0;
    // border: 1px solid red;
  }
}

#sun_left {
  margin-top: 40px;
  width: 50vw;
  height: 100vh;
}</style>